<template>

    <el-table>
        <el-table-column prop="name" label="名字"/>
        <el-table-column prop="picture" label="图片"/>
        <el-table-column prop="price" label="单价"/>
        <el-table-column prop="number" label="个数"/>
        <el-table-column prop="totalPrice" label="总价"/>
        <el-table-column prop="operate" label="操作"/>
    </el-table>
    <div class="bottom">
          <!-- 全选 -->
          <label class="check-all">
            全选
            <input type="checkbox" />
          </label>
          <div class="right-box">
            <!-- 所有商品总价 -->
            <span class="price-box">
            总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;
            <span class="price"></span>
          </span>
            <!-- 结算按钮 -->
            <button class="pay">结算( )</button>
          </div>
    </div>

</template>

<script>
    export default {

    };
</script>




<style scoped>
.app-container .nav-box {
  background: #ddedec;
  height: 60px;
  border-radius: 10px;
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.app-container .nav-box .my-nav {
  display: inline-block;
  background: #5fca71;
  border-radius: 5px;
  width: 90px;
  height: 35px;
  color: white;
  text-align: center;
  line-height: 35px;
  margin-right: 10px;
}

.table img {
  width: 100px;
  height: 100px;
}

button {
  outline: 0;
  box-shadow: none;
  color: #fff;
  background: #d9363e;
  border-color: #d9363e;
  color: #fff;
  background: #d9363e;
  border-color: #d9363e;
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  /*box-shadow: 0 2px 0 rgb(0 0 0 / 2%);*/
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
}
button.pay {
  background-color: #3f85ed;
  margin-left: 20px;
}

.bottom {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
  border: 1px solid #f0f0f0;
  border-top: none;
  padding-left: 20px;
}
.right-box {
  display: flex;
  align-items: center;
}
.check-all {
  cursor: pointer;
}
.price {
  color: hotpink;
  font-size: 30px;
  font-weight: 700;
}
.price-box {
  display: flex;
  align-items: center;
}


</style>